<template>
  <div class="home-container">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img height="200px" src="./swiper.jpg" />
      </van-swipe-item>
      <van-swipe-item>
        <img height="200px" src="./swiper.jpg" />
      </van-swipe-item>
    </van-swipe>

    <van-cell-group class="base-info">
      <van-cell>
        <van-image
          class="avatar"
          slot="icon"
          width="50"
          height="50"
          round
          fit="cover"
          :src="require('../../assets/img/headIcon.jpeg')"
        />
        <div v-if="!user" slot="title" class="welcome-wrapper">欢迎来到人民中心医院</div>
        <div v-if="user" slot="title" class="name">
          <div>电话：</div>
          <div>{{ user.phone }}</div>
        </div>
        <van-button
          v-if="user"
          class="update-btn"
          size="small"
          @click="$router.push('/my/setting/')"
          round
        >账号设置</van-button>
        <van-button
          v-if="!user"
          class="login-btn"
          size="small"
          @click="toLogin"
          round
        >账号登录</van-button>
      </van-cell>
    </van-cell-group>

    <van-grid :column-num="2">
      <van-grid-item icon="clock-o" text="预约挂号" @click="$router.push('/order')"/>
      <van-grid-item icon="refund-o" text="门诊缴费" @click="$router.push('/outpatientPayment/my')"/>
      <van-grid-item icon="flag-o" text="就诊指引" @click="guild = true"/>
      <van-grid-item icon="orders-o" text="我的处方" @click="$router.push('/outpatientPayment/my')"/>
    </van-grid>

    <div>
      <van-cell-group>
        <van-cell title="门诊服务" />
      </van-cell-group>
      <van-grid :border="false" :column-num="3">
        <van-grid-item to="/order/my/" icon="bullhorn-o" text="我的预约" />
        <van-grid-item icon="flag-o" text="就诊指引" @click="guild = true" />
        <van-grid-item icon="shield-o" text="健康知识" />
      </van-grid>
    </div>
    <van-overlay :show="guild" @click="guild = false">
      <div class="wrapper" >
        <div class="block" @click.stop>
          <ul v-for="(item,index) in option" :key="index">
            <li>{{index+1+".  "}}{{item}}</li>
          </ul>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: "HomeIndex",
  data(){
    return{
      guild:false,
      option:["微信扫码，或者搜索公众号“人民中心医院”关注，完善个人信息后可进行手机在线预约检查",
        "点击医院服务，核对信息，无误点击预约挂号",
        "进入自助预约主界面，点预约菜单",
        "点开始预约，选择日期和时间段，最后点击预约",
        "预约之后需要修改预约时间或时段，点击预约查询，找到预约的消息先退约，再重新预约"
      ]
    }
  },
  created() {

  },
  computed:{
    ...mapState(['user'])
  },
  methods:{
    toLogin(){
      this.$router.push("/login")
    }
  }
}
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 200px;
  text-align: center;
  background-color: #39a9ed;
}
.base-info{
  margin-top: 20px;
  .avatar{
    box-sizing: border-box;
    width: 66px;
    height: 66px;
    border: 1px solid #fff;
    margin-right: 14px;
  }
  .name {
    font-size: 15px;
    color: #000000;
  }
}
.welcome-wrapper{
  line-height: 50px;
  font-size: 10px;
  width: 180px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  padding: 10px;
  width: 250px;
  font-size: 14px;
  height: auto;
  background-color: #fff;
  ul{
    li{
      padding-bottom: 5px;
    }
  }
}
</style>
